<template>
    <div>
        <!-- 头部按钮 -->
        <div class="mgb20">
            <el-button   @click="addPlan()"  type="primary" size="small">新增工作计划</el-button>
        </div>
        <!-- 表格 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" >
            <el-tab-pane label="待提交" name="0"></el-tab-pane>
            <el-tab-pane label="审核不通过" name="3"></el-tab-pane>
            <el-tab-pane label="审核中" name="1"></el-tab-pane>
            <el-tab-pane label="审核通过" name="2"></el-tab-pane>
            <el-tab-pane label="全部" name="-1"> </el-tab-pane>
        </el-tabs>
        <el-table :data="dataList" stripe border class="table-index" style="width: 100%;" :height="tableHeight" v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="name" label="计划名称" sortable min-width="140"></el-table-column>
            <el-table-column prop="planStartTime" label="计划开始时间"  sortable  width="140"></el-table-column>
            <el-table-column prop="planEndTime" label="计划结束时间" sortable width="140"></el-table-column>
            <el-table-column prop="type" label="计划类型" sortable width="160" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type===1" type="success">明细附后</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.type===2">不清楚</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.type===3">等待公司上级安排</el-tag>
                </template>
            </el-table-column>
             <el-table-column prop="state" label="审核" sortable width="100" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.state===2" class="el-icon-circle-check cl-success"></span>
                    <span v-else-if="scope.row.state===3" class="el-icon-circle-close cl-danger"></span>
                    <span  v-else-if="scope.row.state===1" class="cl-warning">审核中...</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                <template slot-scope="scope">
                    <el-button type="text" size="small" v-if="!scope.row.state!==1" @click="goChecked(scope.row)">提交审核</el-button>
                    <el-button @click="showPlanDetail(scope.row)" type="text" size="small">详情</el-button>
                    <el-button @click="deletePlan(scope.row)" type="text" size="small"><span class="cl-danger" v-if="!scope.row.state">删除</span></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        <!-- 新增工作计划 -->
        <el-dialog title="新增工作计划" :visible.sync="planDialog.open" width="1200px" :close-on-click-modal="false">
            <el-form ref="form" :model="planDialog.form" label-width="120px" :rules="rules">
                <el-form-item label="计划名称" prop="name">
                    <el-input v-model="planDialog.form.name"></el-input>
                </el-form-item>
                <el-form-item label="计划开始时间" prop="planStartTime">
                    <el-date-picker v-model="planDialog.form.planStartTime" type="datetime" placeholder="请选择计划开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="计划结束时间" prop="planEndTime">
                    <el-date-picker v-model="planDialog.form.planEndTime" type="datetime" placeholder="请选计划择结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" ></el-date-picker>
                </el-form-item>
                <el-form-item label="计划类型" prop="type">
                    <el-radio-group v-model="planDialog.form.type" >
                        <el-radio :label="1">明细附后</el-radio>
                        <el-radio :label="2">不清楚</el-radio>
                        <el-radio :label="3">等待公司上级安排</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitWorkPlan('insert')" type="primary">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="planDetailDialog.info.name" :visible.sync="planDetailDialog.open" width="1200px" center :close-on-click-modal="false">
            <h3 class="dialog-plate-title"><span>工作计划</span></h3>
            <el-form ref="form" :model="planDetailDialog.info" label-width="120px" :rules="rules">
                <el-form-item label="计划名称" prop="name">
                    <el-input v-model="planDetailDialog.info.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="计划开始时间" prop="planStartTime">
                    <el-date-picker v-model="planDetailDialog.info.planStartTime" type="datetime" placeholder="请选择计划开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :disabled="true"></el-date-picker>
                </el-form-item>
                <el-form-item label="计划结束时间" prop="planEndTime">
                    <el-date-picker v-model="planDetailDialog.info.planEndTime" type="datetime" placeholder="请选计划择结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :disabled="true"></el-date-picker>
                </el-form-item>
                <el-form-item label="计划类型" prop="type">
                    <el-radio-group v-model="planDetailDialog.info.type"  :disabled="true">
                        <el-radio :label="1">明细附后</el-radio>
                        <el-radio :label="2">不清楚</el-radio>
                        <el-radio :label="3">等待公司上级安排</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div v-if="planDetailDialog.info.type===1">
                <h3 class="dialog-plate-title"><span>工作计划明细</span></h3>
                <el-button v-if="planDetailDialog.info.state!==1 "  @click="addUpdatePlanDetail('insert')"  type="primary" size="small">新增明细</el-button>
                <el-table :data="planDetailDialog.list" stripe border class="table-index" style="width: 100%;">
                    <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                    <el-table-column prop="content" label="工作内容" sortable min-width="140"></el-table-column>
                    <el-table-column prop="type" label="属性"  sortable  width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type===1">项目性事务</el-tag>
                            <el-tag type="success" v-else-if="scope.row.type===2">例行事务</el-tag>
                            <el-tag type="warning" v-else-if="scope.row.type===3">临时性事务</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column  label="投入资源" sortable  width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.inResource">{{scope.row.inResource}}小时</div>
                            <div v-if="scope.row.inResoureOther">{{scope.row.inResoureOther}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="planFinish" label="计划完成时间" sortable  width="140"></el-table-column>
                    <el-table-column prop="result" label="达成结果" sortable min-width="130"></el-table-column>
                    <el-table-column  label="结果呈现形式"  sortable width="100">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.resultTypes" :key="item">
                                <el-tag size="mini"   v-if="item===1">软件平台</el-tag>
                                <el-tag size="mini"   v-else-if="item===2">纸质资料</el-tag>
                                <el-tag size="mini"  v-else-if="item===3">现场/实物</el-tag>
                                <el-tag size="mini"   v-else-if="item===4">经济价值：{{scope.row.resultTypeSum}}</el-tag>
                                <el-tag size="mini"   v-else-if="item===5">其他：{{scope.row.resultTypeOther}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" sortable min-width="130" ></el-table-column>
                    <el-table-column prop="state" label="审核" sortable width="80" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.state===2" class="el-icon-circle-check cl-success"></span>
                            <span v-else-if="scope.row.state===3" class="el-icon-circle-close cl-danger"></span>
                            <span  v-else-if="scope.row.state===1" class="cl-warning">审核中...</span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isFinish" label="完成" sortable width="80" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isFinish===1" class="el-icon-circle-check cl-success"></span>
                            <span v-else-if="scope.row.isFinish===0" class="el-icon-circle-close cl-danger"></span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" sortable align="center" min-width="100">
                        <template slot-scope="scope">
                            <el-button @click="addUpdatePlanDetail('update',scope.row)" type="text" size="small" v-if="!scope.row.state||scope.row.state===3">修改</el-button>
                            <el-button @click="deletePlanDetail(scope.row)" type="text" size="small"><span class="cl-danger" v-if="!scope.row.state||scope.row.state===3">删除</span></el-button>
                            <el-button @click="addUpdatePlanDetail('isFinish',scope.row)" type="text" size="small" v-if="scope.row.state===2">完成</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <h3 class="dialog-plate-title"><span>附件上传</span></h3>
                 <el-button @click="showattachmentDialog()"  type="primary" size="small">点击上传</el-button>
                <el-table :data="attachmentUploadList" stripe border class="table-index" style="width: 100%;">
                    <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                    <el-table-column prop="name" label="附件名称" sortable min-width="140"></el-table-column>
                    <el-table-column prop="creatorName" label="上传人"  sortable  width="140"></el-table-column>
                    <el-table-column prop="createTime" label="上传时间" sortable width="140"></el-table-column>
                    <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                        <template slot-scope="scope">
                            <el-button @click="download(scope.row)" type="text" size="small" >下载</el-button>
                            <el-button @click="deleteAttachment( scope.row)" type="text" size="small" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="planDetailDialog.info.state>1">
                <h3 class="dialog-plate-title"><span>审核</span></h3>
                <el-form ref="form" :model="planDetailDialog.info" label-width="120px">
                <el-form-item label="审核批注">
                    <el-input type="textarea" :rows="2" placeholder="请输入审核批注" v-model="planDetailDialog.info.approveResult"  :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="审核人">
                    <el-input v-model="planDetailDialog.info.approverName"  :disabled="true" class="width220"></el-input>
                </el-form-item>
                <el-form-item label="审核时间">
                    <el-input v-model="planDetailDialog.info.approveTime" :disabled="true" class="width220"></el-input>
                </el-form-item>
            </el-form>
            </div>
            <div slot="footer">
                <el-button @click="goChecked(planDetailDialog.info)" type="primary" v-if="planDetailDialog.info.state!==1">提交审核</el-button>
            </div>
        </el-dialog>

        <!-- 工作计划明细 -->
    <el-dialog  :title="detailDailog.title" :visible.sync="detailDailog.open" width="1200px" :close-on-click-modal="false">
        <el-form ref="form" :model="detailDailog.form" label-width="120px">
            <el-form-item label="工作内容" prop="name">
                <el-input v-model="detailDailog.form.content" :disabled="detailDailog.type==='isFinish'"></el-input>
            </el-form-item>
            <el-form-item label="属性" prop="type">
                <el-radio-group v-model="detailDailog.form.type" :disabled="detailDailog.type==='isFinish'">
                    <el-radio :label="1">项目性事务</el-radio>
                    <el-radio :label="2">例行事务</el-radio>
                    <el-radio :label="3">临时性事务</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="投入资源">
                <el-radio-group v-model="inResourceRadio" @change="changInResourceRadio" :disabled="detailDailog.type==='isFinish'">
                    <el-radio label="inResource">时间（小时）</el-radio>
                    <el-radio label="inResoureOther">其他</el-radio>
                </el-radio-group>
                <div>
                    <el-input v-model="detailDailog.form.inResource" class="width220" v-if="inResourceRadio==='inResource'" placeholder="请输入投入时间" :disabled="detailDailog.type==='isFinish'">
                        <template slot="prepend">时间(小时)</template>
                    </el-input>
                    <el-input v-model="detailDailog.form.inResoureOther" class="width220" v-if="inResourceRadio==='inResoureOther'" placeholder="请输入投入其他资源" :disabled="detailDailog.type==='isFinish'">
                        <template slot="prepend">其他</template>
                    </el-input>
                </div>
            </el-form-item>

             <el-form-item label="达成结果" prop="result">
                <el-input v-model="detailDailog.form.result" :disabled="detailDailog.type==='isFinish'"></el-input>
            </el-form-item>
            <el-form-item label="结果呈现形式">
                 <el-checkbox-group v-model="detailDailog.form.resultTypes" @change="changeResultTypes" :disabled="detailDailog.type==='isFinish'">
                    <el-checkbox :label="1">软件平台</el-checkbox>
                    <el-checkbox :label="2">纸质资料</el-checkbox>
                    <el-checkbox :label="3">现场/实物</el-checkbox>
                    <el-checkbox :label="4">经济价值</el-checkbox>
                    <el-checkbox :label="5">其他</el-checkbox>
                </el-checkbox-group>
                <div >
                    <el-input v-model="detailDailog.form.resultTypeSum" class="width220 " v-if="isShow(4)" placeholder="请输入金额" :disabled="detailDailog.type==='isFinish'">
                        <template slot="prepend">金额</template>
                    </el-input>
                    <el-input v-model="detailDailog.form.resultTypeOther" class="width220" v-if="isShow(5)" placeholder="请输入其他" :disabled="detailDailog.type==='isFinish'">
                        <template slot="prepend">其他</template>
                    </el-input>
                </div>
            </el-form-item>
             <el-form-item label="计划完成时间" prop="planFinish">
                <el-date-picker v-model="detailDailog.form.planFinish" type="datetime" placeholder="请选计划完成时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :disabled="detailDailog.type==='isFinish'"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="detailDailog.form.remark" :disabled="detailDailog.type==='isFinish'"></el-input>
            </el-form-item>
             <el-form-item label="是否完成" prop="isFinish" v-if="detailDailog.type==='isFinish'">
                <el-switch v-model="detailDailog.form.isFinish" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button @click="submitPlanDetail" type="primary">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog  :title="attachmentDialog.title" :visible.sync="attachmentDialog.open" width="1200px" :close-on-click-modal="false">
         <el-form ref="form" :model="attachmentDialog.formData" label-width="120px">
            <el-form-item label="上传附件" prop="creatorName">
                <el-upload class="upload-demo" :action="attachmentDialog.actionUrl"  multiple :limit="1" :on-success="successhandle">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertAttachment" type="primary">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    </div>
</template>
<script>
import workPlanApi from '@/axios/workPlanApi.js'
import baseHttp from '@/axios/baseHttp.js'
export default {
  name: "workPlan",
  data() {
    return {
        activeName:'0',
        loading:false,
        dataList:[],
        pagination:{
            currentPage: 1,
            pageSize: 10,
            total:0
        },
        planDialog:{
            open:false,
            form:{}
        },
        rules:{
            content:[{ required: true, message: '请输入工作内容', trigger: 'blur' }],
            planStartTime:[{ required: true, message: '请输入计划开始时间', trigger: 'blur' }],
            planEndTime:[{ required: true, message: '请输入计划结束时间', trigger: 'blur' }],
            type:[{ required: true, message: '请选择工作计划', trigger: 'blur' }]
        },
        planDetailDialog:{
            open:false,
            list:[],
            info:{}
        },
        detailDailog:{
            type:'insert',
            title:"",
            open:false,
            form:{}
        },
        tableHeight:(document.documentElement.clientHeight - 240),
        inResourceRadio:null,//投入资源选项
        attachmentUploadList:[],/**附件列表 */
        attachmentDialog:{/***附件上传弹框 */
            title:'',
            open:false,
            formData:{},
            actionUrl:baseHttp.publicImgLoad()
        }
    }
  },
   mounted(){
      this.getList();
  },
  methods: {
      handleClick(){
          this.getList();
      },
      /***获取计划列表 */
    getList(){
        let self = this;
        let postData={
            currentPage:self.pagination.currentPage,
            pageSize:self.pagination.pageSize,
            state:self.activeName==="-1"?null:self.activeName
        }
        self.loading = true;
        workPlanApi.getWorkPlanList(postData).then(res=>{
            self.loading = false;
            self.dataList=res.content.records;
            self.pagination.total=res.content.total;
        },error=>{
            self.loading = false;
        })
    },
    /**删除计划*/
    deletePlan(row){
        let self = this;
        self.$confirm('是否删除此计划？', '提示', {
            confirmButtonClass: 'el-button--warning'
          }).then(() => {
          workPlanApi.deleteWorkPlan(row.id).then(res=>{
                self.$message.success("删除成功")
                self.getList()
            })
        }).catch(() => {});
    },
    /**新增工作计划*/
    addPlan(){
        this.planDialog.open = true;
        this.planDialog.form={
            state:0
        }
    },
    submitWorkPlan(){
         let self = this;
        self.$refs.form.validate(valid=>{
            if(valid){
                let postData = {...self.planDialog.form};
                workPlanApi.insertUpdateWorkPlan('insert',postData).then(res=>{
                    self.$message.success(`新增工作计划成功`)
                    self.activeName = "0";
                    self.getList();
                    self.planDialog.open=false;
                })
            }
        })
    },
    /**点击去审核*/
    goChecked(data){
        let self = this;
        self.$confirm('是否提交给领导审核', '提示', {
            confirmButtonClass: 'el-button--warning'
          }).then(() => {
                data.state = 1;
                workPlanApi.insertUpdateWorkPlan('update',data).then(res=>{
                    self.$message.success(`已进入审核阶段`)
                    self.getList();
                    self.planDetailDialog.open = false;
                })
        }).catch(() => {});
    },
    /**获取工作明细列表*/
     getPlanDetail(){
        let self = this;
        workPlanApi.getPlanDetailList(self.planDetailDialog.info.id).then(res=>{
            self.planDetailDialog.list=res.content;
        })
    },
    /**点击明细*/
    showPlanDetail(row){
        let self = this;
        self.planDetailDialog.open = true;
        self.planDetailDialog.info = {...row};
        self.getAttachmentUploadList();
        if(row.type===1){
            self.getPlanDetail();

        }
    },
    /**删除明细*/
    deletePlanDetail(row){
        let self = this;
        self.$confirm('是否删除此计划明细？', '提示', {
            confirmButtonClass: 'el-button--warning'
          }).then(() => {
          workPlanApi.deletePlanDetail(row.id).then(res=>{
                self.$message.success("删除成功")
                 self.getPlanDetail()
            })
        }).catch(() => {});
    },
    /**新增修改计划明细**/
    addUpdatePlanDetail(type,row){
        let self = this;
        self.detailDailog.open = true;
        self.detailDailog.type = type;
        self.detailDailog.title = `${type==="insert"?"新增":"修改"}工作明细`

        if(row){
            row.resultTypes=row.resultTypes?row.resultTypes:[];
        }
        self.detailDailog.form = type==="insert"?{state:0,resultTypes:[]}:{...row}
        self.inResourceRadio= self.detailDailog.form.inResoureOther?'inResoureOther':(self.detailDailog.form.inResource?'inResource':null)
        if(type==='isFinish'){
            self.detailDailog.form.isFinish=1;
        }
    },

    submitPlanDetail(){
        let self = this;
        self.$refs.form.validate(valid=>{
            if(valid){
                let postData ={...self.detailDailog.form};
                postData.pid = self.planDetailDialog.info.id;
                workPlanApi.insertUpdatePlanDetail(self.detailDailog.type==="insert"?'insert':'update',postData).then(res=>{
                    self.$message.success(`${self.detailDailog.title}成功`)
                    self.detailDailog.open=false;
                    self.getPlanDetail();
                })
            }
        })
    },
    isShow(value){
        return this.detailDailog.form.resultTypes && (this.detailDailog.form.resultTypes.findIndex(item=>item===value)!==-1)
    },
    changInResourceRadio(value){
        switch(value){
            case 'inResource':
                this.detailDailog.form.inResoureOther=''
                break;
            case 'inResoureOther':
                 this.detailDailog.form.inResource=''
                break
        }
    },
    changeResultTypes(value){
       if(value.indexOf(4)===-1){
         this.detailDailog.form.resultTypeSum=''
       }
       if(value.indexOf(5)===-1){
         this.detailDailog.form.resultTypeOther=''
       }
    },
     handleSizeChange(size){
        this.pagination.pageSize = size;
        this.getList()
    },
    handleCurrentChange(current){
        this.pagination.currentPage = current;
         this.getList()
    },
    // 获取附件列表
    getAttachmentUploadList(){
        let self = this;
        workPlanApi.attachmentUploadList(self.planDetailDialog.info.id).then(res=>{
             self.attachmentUploadList=res.content;
        })
    },
    showattachmentDialog(){
        let self = this;
        self.attachmentDialog.open=true;
        self.attachmentDialog.title="附件上传";
        self.attachmentDialog.formData={}
    },
    successhandle(response, file, fileList){
        this.attachmentDialog.formData.path=response.content;
    },
    insertAttachment(){
        let self = this;
        if(self.attachmentDialog.formData.path&&self.attachmentDialog.formData.path!==''){
            let postData={
                ...self.attachmentDialog.formData,
                pid:self.planDetailDialog.info.id
            }
            workPlanApi.insertAttachmentUpload(postData).then(res=>{
                self.$message.success("新增成功")
                self.attachmentDialog.open=false;
                self.getAttachmentUploadList();
            })
        }
    },
    deleteAttachment(row){
        let self= this;
        self.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            workPlanApi.deleteAttachmentUpload(row.id).then(res=>{
                self.$message.success("删除成功")
                self.getAttachmentUploadList();
            })
        });
    },
    download(row){
      window.location.href =row.path
    }
  }
}
</script>
